<template>
<div class="getCode">
    <div class="getWord-title">
     <p class="title-p">
         找回密码
     </p>
     <p class="title-line"></p>
    </div>
    <div class="getWord-form">
    <div class="form-box">
    <i-input element-id="userName" v-bind:maxlength="11" class="login-inp form-inp" v-model.number="userName" @on-change="changecode" :class="{ 'ivu-form-item-error':userNameError }" placeholder="请输入手机号码"></i-input>
     <!-- <p class="form-p">请输入<span>{{userName}}</span>收到的验证码</p> -->
    <div class="form-inp">
     <i-input  element-id="inpCode" v-model.number="inpCode" class="input-set" :class="{ 'ivu-form-item-error':codeError }" placeholder="请输入验证码" @on-change='changecode'></i-input>
     <button class="setMess" :class="{ 'code': code.disabled}" :disabled="code.disabled" @click="Code">{{code.message}}</button>
    </div>
    <input type="button" :class="{ 'rightred':goured}"   value="下一步" class="login-btn" @click="getNext">
    </div>
    </div>
 </div>

</template>
<script>
// import placeholder from "../page/utils/placeholder";
export default {
  name: "GetCode",
  data() {
    return {
      code: {
        disabled: false,
        message: "获取手机验证码"
      },
      userName: "",
      inpCode: "",
      codeError: false,
      userNameError: false,
      goured: false
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   placeholder();
    // });
  },
  methods: {
    //   输入密码模板开始
    getNext() {
      let ths = this;
      ths.$Message.destroy();
      //  手机号验证
      if (!ths.userName) {
        ths.$Message.error("手机号码不能为空！");
        ths.userNameError = true;
        $("#userName").focus();
        ths.goured = false;
        return false;
      } else {
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (!reg.test(ths.userName)) {
          ths.$Message.error("请输入正确格式的手机号");
          ths.userNameError = true;
          ths.goured = false;
          $("#userName").focus();
          return false;
        }
      }
      if (!ths.inpCode) {
        ths.$Message.error("验证码不能为空！");
        ths.codeError = true;
        ths.goured = false;
        $("#inpCode").focus();
        return false;
      } else {
        var reg = /^[0-9]*$/;
        if (!reg.test(ths.inpCode)) {
          ths.$Message.error("验证码必须是数字");
          ths.codeError = true;
          ths.goured = false;
          $("#inpCode").focus();
          return false;
        }
      }

      ths
        .post("/user/phonecode", {
          phone: ths.userName,
          phonecode: ths.inpCode
        })
        .then(data => {
          if (data.responseCode === "100000") {
            ths.getPass = false;
            ths.nextCode = true;
            ths.$cookie.set("userPhone", ths.userName);
            // ths.$router.push("/getCode");
            ths.$router.push("/newPass");
          }
        });
    },
    removeErro: function(name) {
      let ths = this;
      if (name == "userName") {
        ths.userNameError = false;
      }
    },
    // 输入密码模板结束
    Code: function() {
      const ths = this;
      ths.$Message.destroy();
      if (!ths.userName) {
        ths.$Message.error("手机号码不能为空！");
        ths.userNameError = true;
        $("#userName").focus();
        ths.goured = false;
        return false;
      } else {
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (!reg.test(ths.userName)) {
          ths.$Message.error("请输入正确格式的手机号");
          ths.userNameError = true;
          ths.goured = false;
          $("#userName").focus();
          return false;
        }
      }
      ths.post("/external/loginCode", { phone: ths.userName }).then(data => {
        if (data.responseCode === '100000') {
          ths.getCodes(ths.$refs.code);
        }
      });
    },
    getCodes(el) {
      this.code.disabled = true;

      let num = 60;
      let timer = setInterval(() => {
        if (num > 1) {
          num--;
          this.code.message = `${num}s重发`;
        } else {
          clearInterval(timer);
          this.code.message = `重新发送`;
          this.code.disabled = false;
        }
      }, 1000);
    },
    changecode(data) {
      let ths = this;
      if (ths.userName !== "" && ths.inpCode !== "") {
        ths.goured = true;
      } else {
        ths.goured = false;
      }
    }
  }
};
</script>
<style lang="scss">
body,
html {
  font-size: 62.5%;
}
.getCode {
  width: 1190px;
  margin: 10px auto 0 auto;
  // border:1px solid red;
  .getWord-form {
    margin: 0 auto 420px auto;
    border: 1px solid #eeeeee;
    padding-bottom: 40px;
    background: #ffffff;
  }
  .form-box {
    width: 318px;
    margin: 42px auto 0 auto;
    text-align: center;
  }
  .form-p {
    font-size: 1.6rem;
    line-height: 48px;
    color: #6a6a6a;
    margin: 16px 0;
    text-align: left;
  }
  .input-set {
    //   width:414px;
    display: inline;
  }
  .input-set input {
    width: 180px;
    height: 38px;
    float: left;
    margin-right: 12px;
    font-size: 1.4rem;
    color:#9a9a9a;
  }
  .login-inp input {
    width: 318px;
    height: 38px;
    font-size: 1.4rem;
    color:#9a9a9a;
  }
  .setMess {
    width: 114px;
    height: 38px;
    line-height: 38px;
    cursor: pointer;
    color: #9a9a9a;
    border: 1px solid #dddee1;
    background-color: #f6f6f6;
    border-radius: 4px;
    font-size: 1.4rem;
  }
  .login-btn {
    background: #fc878a;
    color: #ffffff;
    font-size: 1.8rem;
    width: 318px;
    height: 40px;
    border-radius: 5px;
    -o-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    -ms-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    -moz-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    -webkit-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    text-align: center;
    cursor:pointer;
  }
  .rightred {
    background: #ee5054;
  }
  .form-inp {
    margin-bottom: 22px;
  }
}
</style>
